<template>
  <div class="app-container shop-detail">
    <!-- <div class="head-title">{{$t('shopProcess.merchantDetail')}}</div> -->
    <!-- 导航栏 -->
    <div class="nav-box">
      <div class="nav">
        <div :class="['nav-item', navStatus === 0 ? 'active' : '']" @click="switchNav(0)">{{ $t('shopProcess.basicInfo')
        }}
        </div>
        <div :class="['nav-item', navStatus === 1 ? 'active' : '']" @click="switchNav(1)">
          {{ $t('shopProcess.businessInfo') }}</div>
        <div :class="['nav-item', navStatus === 2 ? 'active' : '']" @click="switchNav(2)">{{ $t('shopProcess.signUpInfo')
        }}
        </div>
<!--        <div :class="['nav-item', navStatus === 3 ? 'active' : '']" @click="switchNav(3)">
          {{ $t('shopProcess.financeInfo') }}</div>-->
        <div :class="['nav-item', navStatus === 5 ? 'active' : '']" @click="switchNav(5)">
          {{ $t('shopProcess.shopSdFeeAmt') }}</div>
      </div>
    </div>
    <!-- 模块 -->
    <div class="shop-info-box">
      <!-- 基本信息 -->
      <div v-if="navStatus === 0" class="basic-info-mod">
        <!-- 店铺审核状态 -->
        <div class="audit-status">
          <!-- status 0 未审核 1已通过 -1未通过 2平台下线 3 平台下线待审核 -->
          <!-- shopStatus 店铺状态(-1:已删除 0: 停业中 1:营业中 2:平台下线 3:待审核 4:店铺申请中 5.审核失败) -->
          <div v-if="shopAuditStatus" class="audit-item">
            <span>{{ $t('shopProcess.auditStatus') }}：</span>
            <span v-if="shopAuditStatus.status === -1">{{ $t('shop.failed') }}</span>
            <span v-if="shopAuditStatus.status === 0">{{ $t('shop.unreviewed') }}</span>
            <span v-if="shopAuditStatus.status === 1">{{ $t('shop.passed') }}</span>
            <span v-if="shopAuditStatus.status === 2">{{ $t('shop.platformOffline') }}</span>
          </div>
          <div class="audit-item">
            <span>{{ $t('shopProcess.accountStatus') }}：</span>
            <span v-if="shopBasicInfo.accountStatus === 0">{{ $t('shopProcess.disable') }}</span>
            <span v-if="shopBasicInfo.accountStatus === 1">{{ $t('shopProcess.enable') }}</span>
            <span v-if="shopBasicInfo.accountStatus === -1">{{ $t('shopProcess.delete') }}</span>
          </div>
          <div class="audit-item">
            <span>{{ $t('shopProcess.shopStatus') }}：</span>
            <span v-if="shopBasicInfo.shopStatus === -1">{{ $t('shopProcess.deleted') }}</span>
            <span v-if="shopBasicInfo.shopStatus === 0">{{ $t('shopProcess.closed') }}</span>
            <span v-if="shopBasicInfo.shopStatus === 1">{{ $t('shopProcess.inOperation') }}</span>
            <span v-if="shopBasicInfo.shopStatus === 2">{{ $t('shop.platformOffline') }}</span>
            <span v-if="shopBasicInfo.shopStatus === 3">{{ $t('shopProcess.onlinePendingReview') }}</span>
            <span v-if="shopBasicInfo.shopStatus === 4">{{ $t('shopProcess.shopApplication') }}</span>
            <span v-if="shopBasicInfo.shopStatus === 5">{{ $t('shopProcess.storeOpenPendingReview') }}</span>
          </div>
        </div>
        <!-- 信息 -->
        <div class="basic-info-list">
          <el-form  @submit.native.prevent ref="shopBasicInfo" label-width="120px" :model="shopBasicInfo" :rules="shopBasicInfoRules"
            size="small">
            <div class="basic-info-box">
              <div class="left-info">
                <el-form-item :label="this.$i18n.t('shopProcess.merchantName')" prop="merchantName">
                  <p class="txt">
                    <el-input v-model="shopBasicInfo.merchantName"
                      :placeholder="this.$i18n.t('shopProcess.merchantNameInputTips')" maxlength="10" @blur="
                        shopBasicInfo.merchantName =
                        shopBasicInfo.merchantName ?
                          removeHeadAndTailSpaces(shopBasicInfo.merchantName) :
                          shopBasicInfo.merchantName
                      " />
                  </p>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('shopProcess.shopName')" prop="shopName">
                  <p class="txt">
                    <el-input v-model="shopBasicInfo.shopName"
                      :placeholder="this.$i18n.t('shopProcess.shopNameInputTips')" maxlength="20" @blur="
                        shopBasicInfo.shopName =
                        shopBasicInfo.shopName ?
                          removeHeadAndTailSpaces(shopBasicInfo.shopName) :
                          shopBasicInfo.shopName
                      " />
                  </p>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('shopProcess.shopCode')" prop="channelCode">
                  <p class="txt">
                    <el-input
                      v-model="shopBasicInfo.channelCode"
                      :placeholder="this.$i18n.t('shopProcess.shopCodeInputTips')"
                      maxlength="4"
                      @blur="
                            shopBasicInfo.channelCode =
                            shopBasicInfo.channelCode ?
                            removeHeadAndTailSpaces(shopBasicInfo.channelCode) :
                            shopBasicInfo.channelCode
                          "
                      :disabled="!isEditCode"
                    />
                  </p>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('shopProcess.shopShortName')" prop="shopShortName">
                  <p class="txt">
                    <el-input v-model="shopBasicInfo.shopShortName"
                      :placeholder="this.$i18n.t('shopProcess.shopNameInputTips')" maxlength="4"
                      @blur="
                            shopBasicInfo.shopShortName =
                            shopBasicInfo.shopShortName ?
                            removeHeadAndTailSpaces(shopBasicInfo.shopShortName) :
                            shopBasicInfo.shopShortName
                          "
                    />
                  </p>
                </el-form-item>
                <!-- <el-form-item label="联系人：" prop="contactName">
                      <p class="txt">
                        <el-input v-model="shopBasicInfo.contactName" placeholder="请输入常用联系人姓名" maxlength="10" />
                      </p>
                    </el-form-item> -->
                <el-form-item :label="this.$i18n.t('shopProcess.tel')" prop="tel">
                  <p class="txt">
                    <el-input v-model="shopBasicInfo.tel" maxlength="11"
                      :placeholder="this.$i18n.t('shopProcess.telInputTips')" />
                  </p>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('shopProcess.email')" prop="email">
                  <p class="txt">
                    <el-input v-model="shopBasicInfo.email" :placeholder="this.$i18n.t('shopProcess.emailInputTips')"
                      maxlength="30" />
                  </p>
                </el-form-item>

                <el-form-item :label="this.$i18n.t('shopProcess.addr')" prop="currentAddr">
                  <el-cascader ref="cascaderAddr" v-model="shopBasicInfo.currentAddr" :options="addrList"
                    :props="addrListTreeProps" :placeholder="this.$i18n.t('shopProcess.addrInputTips')"
                    class="addr-select" @change="handleAddrChange" />
                </el-form-item>

                <el-form-item :label="this.$i18n.t('shopProcess.detailAddr')" prop="shopAddress">
                  <el-input v-model="shopBasicInfo.shopAddress"
                    :placeholder="this.$i18n.t('shopProcess.detailAddrInputTips')" maxlength="50" @blur="
                      shopBasicInfo.shopAddress =
                      shopBasicInfo.shopAddress ?
                        removeHeadAndTailSpaces(shopBasicInfo.shopAddress) :
                        shopBasicInfo.shopAddress; shopAddressChange()
                                                                ">
                    <el-button slot="append" icon="el-icon-location" @click="mapLocation">{{ $t("platform.location")
                    }}</el-button>
                  </el-input>
                </el-form-item>
                <!-- 地图 -->
                <el-form-item>
                  <baidu-map ref="baiduMp" class="map" :scroll-wheel-zoom="false" :center="center"
                    @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom" @ready="handler"
                    :zoom="zoom">
                    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                    <bm-marker :position="center" :dragging="false" @click="infoWindowOpen">
                      <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">{{
                        $t("shop.storeLocation") }}</bm-info-window>
                    </bm-marker>
                  </baidu-map>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('shopProcess.intro')" prop="intro">
                  <div class="business-license-box">
                    <div class="license-content">
                      <el-input v-model="shopBasicInfo.intro" type="textarea" :rows="4" maxlength="200"
                        :placeholder="this.$i18n.t('shopProcess.introInput')" @blur="
                          shopBasicInfo.intro =
                          shopBasicInfo.intro ?
                            removeHeadAndTailSpaces(shopBasicInfo.intro) :
                            shopBasicInfo.intro
                        " />
                    </div>
                  </div>
                </el-form-item>
              </div>

              <div class="right-info">
                <el-form-item :label="this.$i18n.t('shopProcess.logo')" prop="shopLogo">
                  <div class="business-license-box">
                    <div class="license-content">
                      <img-upload v-model="shopBasicInfo.shopLogo" />
                    </div>
                    <div class="upload-tips">{{ $t('shopProcess.logoTips') }}</div>
                  </div>
                </el-form-item>

                <el-form-item :label="this.$i18n.t('shopProcess.merchantAliId')" prop="merchantAliId">
                  <p class="txt">
                    <el-input v-model="shopBasicInfo.merchantAliId" :placeholder="this.$i18n.t('shopProcess.merchantAliIdInputTips')"
                              maxlength="36" />
                  </p>
                </el-form-item>
                <!-- 背景图 -->
                <!-- <div class="bg-img">
                      <div class="business-license-box">
                        <el-form-item :label="this.$i18n.t('shopProcess.backgroundPic')" prop="mobileBackgroundPic">
                          <div class="license-content">
                            <img-upload v-model="shopBasicInfo.mobileBackgroundPic" />
                          </div>
                          <div class="img-tips">
                            <p>{{ $t('shopProcess.mobileBackgroundPic') }}</p>
                            <p>{{ $t('shopProcess.mobilePicTips') }}</p>
                          </div>
                        </el-form-item>
                      </div>
                      <div class="business-license-box">
                        <el-form-item label-width="0px" prop="pcBackgroundPic">
                          <div class="license-content">
                            <img-upload v-model="shopBasicInfo.pcBackgroundPic" />
                          </div>
                          <div class="img-tips">
                            <p>{{ $t('shopProcess.pcBackgroundPic') }}</p>
                            <p>{{ $t('shopProcess.pcPicTips') }}</p>
                          </div>
                        </el-form-item>
                      </div>
                    </div> -->

                <!-- <el-form-item :label="this.$i18n.t('shopProcess.businessLicense')" prop="businessLicense">
                      <div class="business-license-box">
                        <div class="license-content">
                          <img-upload v-model="shopBasicInfo.businessLicense" />
                          <div class="example-box">
                            <img src="~@/assets/img/example-img/Business-license.png">
                            <div class="tips">{{ $t('shopProcess.example') }}</div>
                          </div>
                        </div>
                        <div class="upload-tips">{{ $t('shopProcess.logoTips') }}</div>
                      </div>
                    </el-form-item> -->
                <!-- <div class="id-box">
                      <div class="upload-content">
                        <div class="upload-img" :class="lang === 'en' ? 'en-upload-img' : 'zh-upload-img'">
                          <el-form-item class="idcard" :label="this.$i18n.t('shopProcess.corporateIdentityCard')" prop="identityCardFront">
                            <img-upload
                              v-model="shopBasicInfo.identityCardFront"
                            />
                          </el-form-item>
                          <el-form-item class="idcard" label-width="0px" prop="identityCardLater">
                            <img-upload
                              v-model="shopBasicInfo.identityCardLater"
                            />
                          </el-form-item>
                        </div>
                        <div class="upload-example">
                          <div class="example-box">
                            <img src="~@/assets/img/example-img/idcard1.png">
                            <div class="tips">{{ $t('shopProcess.identityCardFront') }}</div>
                          </div>
                          <div class="example-box">
                            <img src="~@/assets/img/example-img/idcard2.png">
                            <div class="tips">{{ $t('shopProcess.identityCardLater') }}</div>
                          </div>
                        </div>
                        <div class="upload-tips">{{ $t('shopProcess.identityCardTips') }}</div>
                      </div>
                    </div> -->
              </div>
            </div>

          </el-form>
        </div>

        <div class="default-btn primary-btn foot-btn" @click="updateShopBasicInfo">{{ $t('shopProcess.saveBasicInfo') }}
        </div>
      </div>
      <!-- /基本信息 -->

      <!-- 工商信息 -->
      <div v-if="navStatus === 1" class="business-info-mod">
        <el-form @submit.native.prevent ref="companyInfoForm" :model="companyInfoForm" :rules="companyInfoRule"
          :label-width="lang === 'en' ? '200px' : '150px'" size="small">
          <div class="ci-wrapper">
            <div class="left-info">
              <el-form-item :label="this.$i18n.t('shopProcess.creditCode')" prop="creditCode">
                <el-input v-model="companyInfoForm.creditCode" maxlength="20"
                  :placeholder="this.$i18n.t('shopProcess.creditCodeInputTips')" />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.firmName')" prop="firmName">
                <el-input v-model="companyInfoForm.firmName" maxlength="50"
                  :placeholder="this.$i18n.t('shopProcess.firmNameInputTips')" @blur="
                    companyInfoForm.firmName =
                    companyInfoForm.firmName ?
                      removeHeadAndTailSpaces(companyInfoForm.firmName) :
                      companyInfoForm.firmName
                  " />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.residence')" prop="residence">
                <el-input v-model="companyInfoForm.residence" maxlength="50"
                  :placeholder="this.$i18n.t('shopProcess.residenceInputTips')" @blur="
                    companyInfoForm.residence =
                    companyInfoForm.residence ?
                      removeHeadAndTailSpaces(companyInfoForm.residence) :
                      companyInfoForm.residence
                  " />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.representative')" prop="representative">
                <el-input v-model="companyInfoForm.representative" prop="representative" maxlength="20"
                  :placeholder="this.$i18n.t('shopProcess.representativeInputTips')" @blur="
                    companyInfoForm.representative =
                    companyInfoForm.representative ?
                      removeHeadAndTailSpaces(companyInfoForm.representative) :
                      companyInfoForm.representative
                  " />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.capital')">
                <div class="capital-int">
                  <el-input v-model="companyInfoForm.capital" prop="capital"  type="number" :min="0" :max="99999999"
                    @blur="changeNum" @keydown.native="channelInputLimit">
                    <!-- <el-button slot="append">{{ $t("shopProcess.tenThousandYuan") }}</el-button> -->
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.fountTime')" prop="foundTime">
                <el-date-picker v-model="companyInfoForm.foundTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"
                  :placeholder="this.$i18n.t('platform.seleData')" :picker-options="pickerOptions" />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.businessTime')" prop="startTime">
                <div style="display: flex">
                  <el-date-picker v-model="companyInfoForm.startTime" style="width:162px;" type="date"
                    value-format="yyyy-MM-dd HH:mm:ss" :placeholder="this.$i18n.t('shopProcess.startTime')"
                    :clearable="false" />
                  <span style="margin: 0 10px">-</span>
                  <span class="end-time">
                    <el-date-picker ref="endTime" v-model="companyInfoForm.endTime" style="width:162px;" type="date"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :placeholder="endTimeFlag && !companyInfoForm.endTime ? '' : this.$i18n.t('shopProcess.noFixedTerm')"
                      clearable @change="endTimeFlag = false" @focus="endTimeFlag = false" />
                    <span v-if="endTimeFlag && !companyInfoForm.endTime" class="text" @click="focusEndTime">
                      {{ this.$i18n.t('shopProcess.noFixedTerm') }}
                    </span>
                  </span>
                </div>
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.businessScope')" prop="businessScope">
                <el-input v-model="companyInfoForm.businessScope" type="textarea" resize="none" :rows="4"
                  :placeholder="this.$i18n.t('shopProcess.businessScopeInputTips')" maxlength="500" @blur="
                    companyInfoForm.businessScope =
                    companyInfoForm.businessScope ?
                      removeHeadAndTailSpaces(companyInfoForm.businessScope) :
                      companyInfoForm.businessScope
                  " />
              </el-form-item>
            </div>
            <div class="right-info">
              <el-form-item :label="this.$i18n.t('shopProcess.businessLicense')" prop="businessLicense">
                <div class="business-license-box">
                  <div class="license-content">
                    <img-upload v-model="companyInfoForm.businessLicense" />
                    <div class="example-box">
                      <img src="~@/assets/img/example-img/Business-license.png">
                      <div class="tips">{{ $t('shopProcess.example') }}</div>
                    </div>
                  </div>
                  <div class="upload-tips">{{ $t('shopProcess.logoTips') }}</div>
                </div>
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.accountOpeningLicense')" prop="accountOpeningLicense">
                <div class="business-license-box">
                  <div class="license-content">
                    <img-upload v-model="companyInfoForm.accountOpeningLicense" />
                    <div class="example-box">
                      <img src="~@/assets/img/example-img/AccountOpening-license.png">
                      <div class="tips">{{ $t('shopProcess.example') }}</div>
                    </div>
                  </div>
                  <div class="upload-tips">{{ $t('shopProcess.logoTips') }}</div>
                </div>
              </el-form-item>
              <div class="id-box">
                <div class="upload-content">
                  <div class="upload-img" :class="lang === 'en' ? 'en-upload-img' : 'zh-upload-img'">
                    <el-form-item class="idcard" :label="this.$i18n.t('shopProcess.corporateIdentityCard')"
                      prop="identityCardFront">
                      <img-upload v-model="companyInfoForm.identityCardFront" />
                    </el-form-item>
                    <el-form-item class="idcard" label-width="0px" prop="identityCardLater">
                      <img-upload v-model="companyInfoForm.identityCardLater" />
                    </el-form-item>
                  </div>
                  <div class="upload-example">
                    <div class="example-box">
                      <img src="~@/assets/img/example-img/idcard1.png">
                      <div class="tips">{{ $t('shopProcess.identityCardFront') }}</div>
                    </div>
                    <div class="example-box">
                      <img src="~@/assets/img/example-img/idcard2.png">
                      <div class="tips">{{ $t('shopProcess.identityCardLater') }}</div>
                    </div>
                  </div>
                  <div class="upload-tips">{{ $t('shopProcess.identityCardTips') }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-form>

        <div class="default-btn primary-btn" :class="lang === 'en' ? 'en-foot-btn' : 'foot-btn'"
          @click="updateCompanyInfo">{{ $t('shopProcess.saveCompanyInfo') }}</div>
      </div>
      <!-- /工商信息 -->

      <!-- 签约信息 -->
      <div v-if="navStatus === 2" class="contract-info table-box">
        <!-- 签约类目 -->
        <div class="s-category-item s-item">
          <div class="table-data-title">
            <div class="text"><span class="stress">*</span>{{ $t('shopProcess.signingCategory') }}</div>
            <div class="tips">
              {{ $t('shopProcess.preSigned') }}
              <span class="txt-bold">{{ signCategoryList.length }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}，
              {{ $t('shopProcess.application') }}
              <span class="txt-bold">{{ applyingCategoryNum }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}，
              {{ $t('shopProcess.mostAdd') }}
              <span class="txt-bold">200</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}
            </div>
            <div class="edit-btn">
              <div class="default-btn primary-btn" @click="addSigningHandle(0)">{{ $t('shopProcess.addSigningCategory') }}
              </div>
              <div class="default-btn primary-btn" @click="cateAddOrUpdateHandle(0)">
                {{ $t('shopProcess.editSigningCategory') }}</div>
            </div>
          </div>
          <div class="si-content">
            <el-table :data="signCategoryList" header-cell-class-name="table-header" style="width: 100%">
              <!-- height="306" -->
              <el-table-column prop="name" :label="this.$i18n.t('shopProcess.categoryName')" />
              <el-table-column prop="parentName" :label="this.$i18n.t('shopProcess.parentCategoryName')" />
              <el-table-column prop="platformRate" :label="this.$i18n.t('shopProcess.categoryRate')" v-if="false">
                <template slot-scope="{ row }">
                  <span v-if="row.platformRate || row.platformRate === 0">{{ row.platformRate }} %</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column prop="customizeRate" :label="this.$i18n.t('shopProcess.customRate')" v-if="false">
                <template slot-scope="{ row }">
                  <span v-if="row.customizeRate || row.customizeRate === 0">{{ row.customizeRate }} %</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column prop="qualifications" :label="this.$i18n.t('shopProcess.categoryQualifications')">
                <template slot-scope="{row}">
                  <div v-if="row.imgs.length" class="img-box">
                    <el-image v-for="(img, index) in row.imgs" :key="index" class="tab-img" :src="img"
                      :preview-src-list="row.imgs" />
                    <!-- <img
                          v-for="(item, index) in row.imgs"
                          :key="index"
                          :src="item.indexOf('http')===-1 ? resourcesUrl + item : item"
                          @click="picturePreview(item)"
                        > -->
                  </div>
                  <span v-if="!row.imgs.length">--</span>
                </template>
              </el-table-column>
              <el-table-column prop="categoryStatus" :label="this.$i18n.t('shopProcess.categoryStatus')">
                <template slot-scope="scope">
                  <div v-if="scope.row.categoryStatus === 1" class="tag-txt">{{ $t('publics.normal') }}</div>
                  <div v-if="scope.row.categoryStatus === 0" class="tag-txt red-tag-txt">{{ $t('publics.LowerShelf') }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 签约品牌 -->
        <div class="s-brand-item s-item">
          <div class="table-data-title">
            <div class="text">{{ $t('shopProcess.signingBrand') }}</div>
            <div class="tips">
              {{ $t('shopProcess.preSigned') }}
              <span class="txt-bold">{{ signedBrands.length }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}，
              {{ $t('shopProcess.application') }}
              <span class="txt-bold">{{ applyingBrandNum }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}，
              {{ $t('shopProcess.mostAdd') }}
              <span class="txt-bold">50</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}
            </div>
            <div class="edit-btn">
              <div class="default-btn primary-btn" @click="addSigningHandle(1)">{{ $t('shopProcess.addSigningBrand') }}
              </div>
              <div class="default-btn primary-btn" @click="cateAddOrUpdateHandle(1)">{{ $t('shopProcess.editSigningBrand')
              }}</div>
            </div>
          </div>
          <div class="si-content main-container">
            <div class="table-con">
              <el-table :data="signedBrands" header-cell-class-name="table-header" style="width: 100%">
                <!-- height="284" -->
                <el-table-column prop="name" :label="this.$i18n.t('shopProcess.brandName')">
                  <template slot-scope="scope">
                    <span class="table-cell-text">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="firstLetter" :label="this.$i18n.t('shopProcess.firstLetter')" />
                <el-table-column prop="platformRate" :label="this.$i18n.t('shopProcess.brandLogo')">
                  <template slot-scope="scope">
                    <div class="brand-logo">
                      <el-image v-if="scope.row.imgUrl" class="tab-img"
                        :src="scope.row.imgUrl.indexOf('http') === -1 ? resourcesUrl + scope.row.imgUrl : scope.row.imgUrl"
                        :preview-src-list="scope.row.imgUrl.indexOf('http') === -1 ? [resourcesUrl + scope.row.imgUrl] : [scope.row.imgUrl]" />
                      <!-- <img v-if="scope.row.imgUrl" :src="scope.row.imgUrl.indexOf('http')===-1 ? resourcesUrl + scope.row.imgUrl : scope.row.imgUrl"> -->
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="imgs" :label="this.$i18n.t('shopProcess.brandQualifications')">
                  <template slot-scope="{row}">
                    <div v-if="row.imgs.length" class="brand-logo">
                      <el-image v-for="(img, index) in row.imgs" :key="index" class="tab-img" :src="img"
                        :preview-src-list="row.imgs" />
                      <!-- <img
                            v-for="(item, index) in row.imgs"
                            :key="index"
                            :src="item.indexOf('http')===-1 ? resourcesUrl + item : item"
                          > -->
                    </div>
                    <div v-if="!row.imgs.length">--</div>
                    <!-- <pics-upload @imgUrl="getImgUrl(arguments, scope.$index)" /> -->
                  </template>
                </el-table-column>
                <el-table-column prop="brandStatus" :label="this.$i18n.t('shopProcess.brandStatus')">
                  <template slot-scope="scope">
                    <div v-if="scope.row.brandStatus === 1" class="tag-txt">{{ $t('publics.normal') }}</div>
                    <div v-if="scope.row.brandStatus === 0" class="tag-txt red-tag-txt">{{ $t('publics.LowerShelf') }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- 签约链 -->
        <div class="s-lian-item s-item" v-show="false">
          <div class="table-data-title">
            <div class="text">{{ $t('shopProcess.signingLian') }}</div>
            <div class="tips">
              {{ $t('shopProcess.preSigned') }}
              <span class="txt-bold">{{ signedLians.length }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.lian') }}，
              {{ $t('shopProcess.application') }}
              <span class="txt-bold">{{ applyingLianNum }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.lian') }}，
              {{ $t('shopProcess.mostAdd') }}
              <span class="txt-bold">50</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.lian') }}
            </div>
            <div class="edit-btn">
              <div class="default-btn primary-btn" @click="addSigningHandle(2)">{{ $t('shopProcess.addSigningLian') }}
              </div>
              <div class="default-btn primary-btn" @click="cateAddOrUpdateHandle(2)">{{ $t('shopProcess.editSigningLian')
                }}</div>
            </div>
          </div>
          <div class="si-content main-container">
            <div class="table-con">
              <el-table :data="signedLians" header-cell-class-name="table-header" style="width: 100%">
                <!-- height="284" -->
                <el-table-column prop="name" :label="this.$i18n.t('shopProcess.lianName')">
                  <template slot-scope="scope">
                    <span class="table-cell-text">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="blockchainCode" :label="this.$i18n.t('shopProcess.lianCode')">
                  <template slot-scope="scope">
                    <span class="table-cell-text">{{ scope.row.blockchainCode }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="platformRate" :label="this.$i18n.t('shopProcess.lianLogo')">
                  <template slot-scope="scope">
                    <div class="brand-logo">
                      <el-image v-if="scope.row.imgUrl" class="tab-img"
                                :src="scope.row.imgUrl.indexOf('http') === -1 ? resourcesUrl + scope.row.imgUrl : scope.row.imgUrl"
                                :preview-src-list="scope.row.imgUrl.indexOf('http') === -1 ? [resourcesUrl + scope.row.imgUrl] : [scope.row.imgUrl]" />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="discount" :label="this.$i18n.t('shopProcess.lianDiscount')">
                  <template slot-scope="{ row }">
                    <span v-if="row.discount || row.discount === 0">{{ row.discount }} %</span>
                    <span v-else>--</span>
                  </template>
                </el-table-column>
                <el-table-column prop="status" :label="this.$i18n.t('shopProcess.lianStatus')">
                  <template slot-scope="scope">
                    <span class="table-cell-text" v-if="scope.row.blockchainShopStatus==0">待审核</span>
                    <span class="table-cell-text" v-if="scope.row.blockchainShopStatus==1">已通过</span>
                    <span class="table-cell-text" v-if="scope.row.blockchainShopStatus==-1">未通过</span>



                    <!-- <div v-if="scope.row.blockchainShopStatus === 1" class="tag-txt">{{ $t('publics.normal') }}</div>
                    <div v-if="scope.row.blockchainShopStatus === 0" class="tag-txt red-tag-txt">{{ $t('publics.LowerShelf') }}</div> -->
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- 签约有效期 -->
        <div class="s-sign-item s-item">
          <div class="table-data-title">
            <div class="text"><span class="stress">*</span>{{ $t('shopProcess.validityPeriodOfContract') }}</div>
            <div class="tips">{{ $t('shopProcess.validPeriod') }}</div>
          </div>
          <div class="si-content">
            <div>
              <el-date-picker v-model="contractTimeRange" type="daterange" range-separator="至"
                :start-placeholder="this.$i18n.t('shopProcess.startTime')"
                :end-placeholder="this.$i18n.t('shopProcess.endTime')" value-format="yyyy-MM-dd HH:mm:ss" size="small"
                @change="getContractTimeRange" :clearable="false" />
            </div>
          </div>
        </div>
        <!-- 商家类型 -->
        <div class="s-sign-item s-item">
          <div class="table-data-title">
            <div class="text"><span class="stress">*</span>{{ $t('shopProcess.shopType') }}</div>
          </div>
          <div class="si-content">
            <div>
              <el-radio v-model="signingInfo.type" :label="0">{{ $t('shopProcess.ordinaryShop') }}</el-radio>
              <el-radio v-model="signingInfo.type" :label="1">{{ $t('shopProcess.preferredGoodShop') }}</el-radio>
            </div>
          </div>
        </div>
        <div class="default-btn primary-btn foot-btn" @click="updateSigningInfo">{{
          $t('shopProcess.saveContractInformation') }}</div>
      </div>
      <!-- /签约信息 -->

      <!-- 财务信息 -->
      <div v-if="navStatus === 3" class="financial-info" v-show="false">
        <div class="table-data-title">
          <div class="text"><span class="asterisk">*</span>{{ $t('shopProcess.settlementAccount') }}</div>
          <div class="tips">
            {{ $t('shopProcess.added') }}
            <span class="txt-bold">{{ settlementAccounts.length }}</span>
            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.settlementAccount') }},{{ $t('shopProcess.mostAdd') }}
            <span class="txt-bold">5</span>
            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.settlementAccount') }}
          </div>
        </div>
        <div class="table-box">
          <el-table :data="settlementAccounts" header-cell-class-name="table-header" style="width: 100%">
            <el-table-column prop="bankName" :label="this.$i18n.t('shopProcess.bankName')" />
            <el-table-column prop="recipientName" :label="this.$i18n.t('shopProcess.recipientName')" />
            <el-table-column prop="cardNo" :label="this.$i18n.t('shopProcess.account')" />
             <el-table-column prop="bankCode" :label="this.$i18n.t('shopProcess.bankCode')" />
             <el-table-column prop="province" :label="this.$i18n.t('shopProcess.province')" />
             <el-table-column prop="city" :label="this.$i18n.t('shopProcess.city')" />
            <el-table-column prop="openingBank" :label="this.$i18n.t('shopProcess.openingBank')" />
            <el-table-column prop="isDefault" :label="this.$i18n.t('shopProcess.masterAccount')" align="center">
              <template slot-scope="scope">
                {{ scope.row.isDefault ? $t('shopProcess.yes') : $t('shopProcess.no') }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- /财务信息 -->
      <div v-if="navStatus === 5" class="basic-info-mod">
      <!-- 杉德费率设置 -->
        <div class="basic-info-list">
          <el-form  label-width="120px" :model="shopSandInfo" size="small">
                <el-form-item label="类型" prop="shopSdFeeAmtType">
                  <el-select v-model="shopSandInfo.shopSdFeeAmtType">
                    <el-option label="比例" value="1" ></el-option>
                    <el-option label="固定值" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="费率" prop="shopSdFeeAmt" >
                    <el-input v-model="shopSandInfo.shopSdFeeAmt" placeholder="比例值时为计算后的值" maxlength="30" type="text"  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1').replace(/^(\d+\.\d{0,4}).*$/, '$1');"   style="width: 240px"/>
                </el-form-item>
          </el-form>
        </div>
        <div v-if="visibleSand2" class="default-btn primary-btn foot-btn" @click="updateShopSandInfo">修改</div>
        <div v-if="visibleSand" class="default-btn primary-btn foot-btn" @click="updateShopSandInfo">{{ $t('shopProcess.saveSandInfo') }}</div>
      </div>
      <!-- /杉德费率设置 -->
    </div>
    <accountChain-manage v-if="dialogChainVisible" ref="accountChainManage" @refreshDataList="queryShopChainConfigInfo" />
    <category-add-or-update v-if="cateAddOrUpdateVisible" ref="cateAddOrUpdate" :sign-category-list="signCategoryList"
      @closePopup="closePopup" />
    <brand-add-or-update v-if="brandAddOrUpdateVisible" ref="brandAddOrUpdate" @closePopup="closePopup" />
    <lian-add-or-update v-if="lianAddOrUpdateVisible" ref="lianAddOrUpdate" @closePopup="closePopup" />
    <!-- 类目签约弹窗 -->
    <add-signing-category v-if="addSigningCategoryVisible" ref="addSigningCategory" :applyForSign="true"
      :signingCount="signCategoryList.length" @closePopup="closePopup" />
    <!-- 品牌签约弹窗 -->
    <add-signing-brand v-if="addSigningBrandVisible" ref="addSigningBrand" :applyForSign="true"
      :signingCount="signedBrands.length" @closePopup="closePopup" />
    <!-- 链平台签约弹窗 -->
    <add-signing-lian v-if="addSigningLianVisible" ref="addSigningLian" :applyForSign="true"
      :signingCount="signedLians.length" @closePopup="closePopup" />
</div>
</template>

<script>
import addSigningCategory from './signing-components/category-add-or-update'
import addSigningBrand from './signing-components/brand-add-or-update'
import addSigningLian from './signing-components/lian-add-or-update'
import ImgUpload from '@/components/img-upload'
import { validEmail, isCreditCode, validNoEmptySpace, removeHeadAndTailSpaces } from '@/utils/validate'
import categoryAddOrUpdate from './shopEdit/category-add-or-update'
import brandAddOrUpdate from './shopEdit/brand-add-or-update'
import lianAddOrUpdate from './shopEdit/lian-add-or-update'
import accountChainManage from './shopInfo-accountChain-manage'
import moment from 'moment'
import {toJSON} from 'lodash/seq'
export default {
  components: {
    ImgUpload,
    categoryAddOrUpdate,
    brandAddOrUpdate,
    lianAddOrUpdate,
    addSigningCategory,
    accountChainManage,
    addSigningBrand,
    addSigningLian
  },
  data () {
    const validateMobile = (rule, value, callback) => {
      let phoneReg = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/
      let mobile = /^(?:(?:\+|00)86)?1\d{10}$/
      if (phoneReg.test(value) || mobile.test(value)) {
        callback()
      } else {
        callback(new Error(this.$i18n.t('shopProcess.telErrorTips')))
      }
    }
    const validateEmail = (rule, value, callback) => {
      if (!validEmail(value) || value.indexOf(' ') !== -1) {
        callback(new Error(this.$i18n.t('shopProcess.emailErrorTips')))
      } else {
        callback()
      }
    }
    const vaildCreditCode = (rule, value, callback) => {
      if (!isCreditCode(value)) {
        callback(new Error(this.$i18n.t('shopProcess.creditCodeErrorTips')))
      } else {
        callback()
      }
    }
    const validateNotEmpty = (role, value, callback) => {
      if (validNoEmptySpace(value)) {
        callback(new Error(this.$i18n.t('shopProcess.inputAllSpace')))
      } else {
        callback()
      }
    }
    const validateNotEmptyRep = (role, value, callback) => {
      this.companyInfoForm.representative = this.companyInfoForm.representative.trim()
      if (this.companyInfoForm.representative === '' || this.companyInfoForm.representative.indexOf(' ') !== -1) {
        callback(new Error(this.$i18n.t('shopProcess.inputAllSpace')))
      } else {
        callback()
      }
    }
    return {
      removeHeadAndTailSpaces: removeHeadAndTailSpaces,
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      shopId: this.$route.query.shopId || 0,
      isSubmit: false,
      isEditCode: false,
      navStatus: 0,

      // 语言
      lang: window.localStorage.getItem('bbcLang'),

      // 店铺审核状态
      shopAuditStatus: {},
      // 店铺状态
      shopStatus: {},

      // 店铺基本信息
      shopBasicInfo: {},
      contractTimeRange: [],
      shopBasicInfoRules: {
        merchantName: [
          { required: true, message: this.$i18n.t('shopProcess.merchantNameNotEmpty'), trigger: 'blur' },
          { min: 2, max: 10, message: this.$i18n.t('shopProcess.merchantNameErrorTips'), trigger: 'blur' },
          { validator: validateNotEmpty, trigger: 'blur' }

        ],
        shopName: [
          { required: true, message: this.$i18n.t('shopProcess.shopNameNotEmpty'), trigger: 'blur' },
          { min: 2, max: 20, message: this.$i18n.t('shopProcess.shopNameInputTips'), trigger: 'blur' },
          { validator: validateNotEmpty, trigger: 'blur' }
        ],
        shopShortName: [
          { required: true, message: this.$i18n.t('shopProcess.shopNameNotEmpty'), trigger: 'blur' },
          { min: 2, max: 20, message: this.$i18n.t('shopProcess.shopNameInputTips'), trigger: 'blur' },
          { validator: validateNotEmpty, trigger: 'blur' }
        ],
        channelCode: [
          { required: true, message: this.$i18n.t('shopProcess.shopCodeNotEmpty'), trigger: 'blur' },
          { min: 2, max: 4, message: this.$i18n.t('shopProcess.shopCodeInputTips'), trigger: 'blur' },
          { validator: validateNotEmpty, trigger: 'blur' }
        ],
        // contactName: [
        //   { required: true, message: '联系人不能为空', trigger: 'blur' },
        //   { min: 2, max: 10, message: '联系人长度在2-10个字符之间', trigger: 'blur' },
        //   { validator: validateNotEmpty, trigger: 'blur' }
        // ],
        tel: [
          { required: true, message: this.$i18n.t('shopProcess.telNotEmpty'), trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ],
        email: [
          { required: true, message: this.$i18n.t('shopProcess.emailInputTips'), trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ],
        currentAddr: [
          { required: true, message: this.$i18n.t('shopProcess.addrInputTips'), trigger: ['blur', 'change'] }
        ],
        shopAddress: [
          { required: true, message: this.$i18n.t('shopProcess.detailAddrNotEmpty'), trigger: 'blur' },
          { validator: validateNotEmpty, trigger: 'blur' }
        ],
        shopLogo: [
          { required: true, message: this.$i18n.t('shopProcess.logoNotEmpty'), trigger: 'change' }
        ]
        // mobileBackgroundPic: [
        //   { required: true, message: this.$i18n.t('shopProcess.mobilePicNotEmpty'), trigger: 'change' }
        // ],
        // pcBackgroundPic: [
        //   { required: true, message: this.$i18n.t('shopProcess.pcPicNotEmpty'), trigger: 'change' }
        // ],
        // businessLicense: [
        //   { required: true, message: this.$i18n.t('shopProcess.businessLicenseNotEmpty'), trigger: 'change' }
        // ],
        // identityCardFront: [
        //   { required: true, message: this.$i18n.t('shopProcess.identityCardFrontNotEmpty'), trigger: 'change' }
        // ],
        // identityCardLater: [
        //   { required: true, message: this.$i18n.t('shopProcess.identityCardLaterNotEmpty'), trigger: 'change' }
        // ]
      },
      // 省市区
      currentAddr: [], // 选中地址
      addrList: [],
      addrListTreeProps: {
        value: 'areaId',
        label: 'areaName',
        children: 'areas'
      },

      // 店铺工商信息
      companyInfoForm: {
        creditCode: '',
        firmName: '',
        residence: '',
        representative: '',
        capital: '',
        foundTime: '',
        startTime: '',
        endTime: '',
        // businessScope: '',
        businessLicense: '',
        identityCardFront: '',
        identityCardLater: '',
        accountOpeningLicense: ''
      },
      endTimeFlag: true,
      // 店铺签约信息
      signingInfo: {
        contractStartTime: '', // 签约起始时间
        contractEndTime: '', // 签约终止时间
        type: '' // 店铺类型 0普通店铺 1优选好店
      },
      pickerOptions: {
        disabledDate (time) {
          const date = moment().add(0, 'days').startOf('days')
          return (
            time.getTime() >= date.valueOf()
          )
        }
      },
      companyInfoRule: {
        creditCode: [
          { required: true, message: this.$i18n.t('shopProcess.creditCodeInputTips'), trigger: 'blur' },
          { validator: vaildCreditCode, trigger: 'blur' }
        ],
        firmName: [
          { required: true, message: this.$i18n.t('shopProcess.firmNameNotEmpty'), trigger: 'blur' }
        ],
        residence: [
          { validator: validateNotEmpty, trigger: ['blur', 'change'] }
        ],
        businessScope: [
          { required: true, message: this.$i18n.t('shopProcess.businessScopeNotEmpty'), trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: this.$i18n.t('formData.startTimeCannotBeEmpty'), trigger: 'change' }
        ],
        businessLicense: [
          { required: true, message: this.$i18n.t('shopProcess.businessLicenseNotEmpty'), trigger: 'change' }
        ],
        representative: [
          { required: true, message: this.$i18n.t('shopProcess.representativeNotEmpty'), trigger: 'blur' },
          { validator: validateNotEmptyRep, trigger: 'blur' }
        ],
        identityCardFront: [
          { required: true, message: this.$i18n.t('shopProcess.identityCardFrontNotEmpty'), trigger: 'change' }
        ],
        identityCardLater: [
          { required: true, message: this.$i18n.t('shopProcess.identityCardLaterNotEmpty'), trigger: 'change' }
        ]
        /* ,accountOpeningLicense: [
          { required: true, message: this.$i18n.t('shopProcess.accountOpeningLicenseNotEmpty'), trigger: 'change' }
        ] */
      },

      // 店铺分类签约信息
      signCategoryList: [],
      // 平台品牌签约信息
      signedBrands: [], // 平台品牌+自定义品牌
      // 自增签约品牌信息
      customizeBrandList: [],
      // 链信息
      signedLians: [],
      cateAddOrUpdateVisible: false,
      brandAddOrUpdateVisible: false,
      lianAddOrUpdateVisible: false,
      addSigningCategoryVisible: false,
      addSigningBrandVisible: false,
      addSigningLianVisible: false,

      // 店铺财务信息
      settlementAccounts: [],
      dialogChainVisible: false,
      // 链配置
      chainAccounts: [],

      // 定位
      show: false,
      center: {
        lng: 113.327955,
        lat: 23.136783
      },
      center2: {
        lng: 113.327955,
        lat: 23.136783
      },
      zoom: 18,
      baiduIndex: false,

      applyingCategoryNum: 0, // 申请中类目数量
      applyingBrandNum: 0, // 申请中品牌数量
      applyingLianNum: 0, // 申请中链平台数量

      visibleSand: false,
      visibleSand2: false,
      shopSandInfo: {
        shopSdFeeAmtType: '1',
        shopSdFeeAmt: ''
      }
    }
  },
  created () {
    // 查询基本信息
    this.switchNav(0)
  },

  mounted () {
    // 获取地址列表
    this.getAddrList()
    // 店铺审核状态
    this.queryShopAuditStatus()
    // 初始化地图数据
    this.setCenter()
  },

  methods: {
    handler ({ BMap, map }) {
      this.baiduIndex = true
      this.center = { ...this.center2 }
    },
    switchNav (value) {
      this.navStatus = value
      if (value === 1) {
        // 查询工商信息
        this.queryShopBusinessInfo()
      } else if (value === 2) {
        // 查询分类签约信息
        this.getSignCategoryList()
        // 查询品牌签约信息
        this.getSignBrandList()
        // 查询链平台签约信息
        this.getSignLianList()

        // 查询分类申请信息
        this.getSignCategoryList(0)
        // 查询品牌申请信息
        this.getSignBrandList(0)
        // 查询链平台申请信息
        this.getSignLianList(0)
      } else if (value === 3) {
        // 查询财务信息
        this.queryShopFinancialInfo()
      } else if (value === 4) {
        // 连配置
        this.queryShopChainConfigInfo()
      } else if (value === 5) {
        debugger
        // 连配置
        this.getShopSandInfo()
      } else {
        // 查询基本信息
        this.queryShopBasicInfo()
      }
      this.$forceUpdate()
    },
    getShopSandInfo () {
      this.$http({
        url: this.$http.adornUrl(`/shop/shopAuditing/shopDetail/${this.shopId}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data.shopSdFeeAmtType) {
          this.visibleSand2 = true
          this.visibleSand = false
        }else{
          this.visibleSand = true
          this.visibleSand2 = false
        }
        // eslint-disable-next-line no-unused-expressions,no-sequences
        this.shopSandInfo.shopSdFeeAmtType = data.shopSdFeeAmtType,
        this.shopSandInfo.shopSdFeeAmt = data.shopSdFeeAmt
      })
    },
    updateShopSandInfo () {
      this.$http({
        url: this.$http.adornUrl(`/shop/shopAuditing/updateSendUserId`),
        method: 'PUT',
        data: this.$http.adornData({'shopId': this.shopId, 'shopSdFeeAmtType': this.shopSandInfo.shopSdFeeAmtType, 'shopSdFeeAmt': this.shopSandInfo.shopSdFeeAmt})
      }).then(({ data }) => {
        this.visibleSand = false
        this.visibleSand2 = true
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 1000
        })
      })
    },
    /**
     * 店铺审核状态
     */
    queryShopAuditStatus () {
      this.$http({
        url: this.$http.adornUrl(`/shop/shopAuditing/${this.shopId}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.shopAuditStatus = data
      })
    },

    /**
     * 查询基本信息
     */
    queryShopBasicInfo () {
      this.$http({
        url: this.$http.adornUrl('/platform/shopDetail/info'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.shopId
        })
      }).then(({ data }) => {
        this.shopBasicInfo = data
        this.isEditCode = !data.channelCode
        this.signingInfo.type = data.type
        if (data.contractStartTime && data.contractEndTime) {
          this.signingInfo.contractStartTime = data.contractStartTime
          this.signingInfo.contractEndTime = data.contractEndTime
          this.contractTimeRange = [data.contractStartTime, data.contractEndTime]
        }
        this.shopBasicInfo.currentAddr = [
          data.provinceId,
          data.cityId,
          data.areaId
        ]
        if (data.shopLat && data.shopLng) {
          if (this.baiduIndex) {
            this.center = {
              lng: Number.parseFloat(data.shopLng),
              lat: Number.parseFloat(data.shopLat)
            }
          } else {
            this.center2 = {
              lng: Number.parseFloat(data.shopLng),
              lat: Number.parseFloat(data.shopLat)
            }
          }
        }
        this.shopStatus.shopStatus = data.shopStatus
      })
    },

    /**
     * 省市区
     */
    getAddrList () {
      this.$http({
        url: this.$http.adornUrl(`/admin/area/listAreaOfEnable`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.addrList = data
      })
    },
    /**
     * 监听地址改变
     */
    handleAddrChange (value) {
      if (value.length > 0) {
        const labels = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels
        this.shopBasicInfo.province = labels[0]
        this.shopBasicInfo.provinceId = value[0]
        this.shopBasicInfo.city = labels[1]
        this.shopBasicInfo.cityId = value[1]
        this.shopBasicInfo.area = labels[2]
        this.shopBasicInfo.areaId = value[2]
        this.mapLocation(true)
      }
    },

    shopAddressChange () {
      this.mapLocation(true)
    },

    /**
     * 查询工商信息
     */
    queryShopBusinessInfo () {
      this.$http({
        url: this.$http.adornUrl('/platform/shopCompany'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.shopId
        })
      }).then(({ data }) => {
        this.companyInfoForm = data
      })
    },
    focusEndTime () {
      this.$refs.endTime.focus()
    },

    /**
     * 注册资本输入框校验
     */
    changeNum () {
      const capital = this.companyInfoForm.capital
      this.companyInfoForm.capital = this.checkInput(capital)
      if (Number.parseFloat(this.companyInfoForm.capital) === 0) {
        this.companyInfoForm.capital = 0
      }
      if (Number.parseFloat(this.companyInfoForm.capital) > 99999999) {
        this.companyInfoForm.capital = 99999999
      }
    },
    /**
     * input输入框只允许输入正数和小数(保留小数点后两位)
     */
    checkInput (num) {
      if (num) {
        var tmpVal = num.replace(/[^\d^\\.]/g, '')
        var reg = /^(0|([1-9]\d*))(\.\d{1,2})?$/ // 最多允许后输入两位小数
        if (!reg.test(tmpVal)) {
          tmpVal = tmpVal + ''
          tmpVal = tmpVal.substring(0, tmpVal.indexOf('.') + 3)
          var n = (tmpVal.split('.')).length - 1
          if (n > 1) {
            tmpVal = tmpVal.substring(0, tmpVal.indexOf('.'))
          }
        }
        return tmpVal
      } else {
        return ''
      }
    },
    /**
     * 输入框不允许输入'-'或'+'
     */
    channelInputLimit (e) {
      const key = e.key
      if (key === '-' || key === '+') {
        e.returnValue = false
        return false
      }
      return true
    },

    /**
     * 签约类目列表
     */
    getSignCategoryList (status = 1) {
      this.$http({
        url: this.$http.adornUrl('/prod/category/signingInfoByShopId'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.shopId,
          status: status // 签约状态：1：已通过 0待审核 -1未通过
        })
      }).then(({ data }) => {
        if (data) {
          if (status === 1) {
            this.signCategoryList = data
            this.signCategoryList.forEach(item => {
              item.imgs = item.qualifications ? item.qualifications.split(',') : []
              if (item.imgs.length) {
                item.imgs.forEach(img => {
                  img = this.getImgSrc(img)
                })
              }
            })
          } else if (status === 0) {
            this.applyingCategoryNum = data.length
          }
        }
      })
    },
    /**
     * 获取签约品牌列表
     */
    getSignBrandList (status = 1) {
      this.$http({
        url: this.$http.adornUrl('/platform/brand/listSigningByShopId'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.shopId,
          status: status // 签约状态：1：已通过 0待审核 -1未通过
        })
      }).then(({ data }) => {
        if (status === 1) {
          // data.platformBrandList.length ? this.signedBrands.push(...data.platformBrandList) : this.signedBrands = []
          this.signedBrands = data.platformBrandList
          this.signedBrands.forEach(el => {
            el.imgs = el.qualifications ? el.qualifications.split(',') : []
            if (el.imgs.length) {
              el.imgs.forEach(img => {
                img = this.getImgSrc(img)
              })
            }
          })
        } else if (status === 0) {
          this.applyingBrandNum = data.platformBrandList.length
        }
      })
    },
    /**
     * 获取签约链列表
     */
    getSignLianList (status = 1) {
      this.$http({
        url: this.$http.adornUrl('/platform/blockchain/listSigningByShopId'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.shopId,
          status: status // 签约状态：1：已通过 0待审核 -1未通过
        })
      }).then(({ data }) => {
        if (status === 1) {
          this.signedLians = data
        } else if (status === 0) {
          this.applyingLianNum = data.length
        }
      })
    },
    /**
     * 获取图片路径
     */
    getImgSrc (img) {
      if (!img) {
        return ''
      }
      if (img.indexOf('http://') === 0 || img.indexOf('https://') === 0) {
        return img
      }
      return this.resourcesUrl + img
    },

    /**
     * 编辑签约信息弹窗
     */
    addSigningHandle (type) {
      if (type === 0) {
        this.addSigningCategoryVisible = true
        this.$nextTick(() => {
          this.$refs.addSigningCategory.init(this.shopId)
        })
        return
      }
      if (type === 1) {
        this.addSigningBrandVisible = true
        this.$nextTick(() => {
          this.$refs.addSigningBrand.init(this.shopId)
        })
      }
      if (type === 2) {
        this.addSigningLianVisible = true
        this.$nextTick(() => {
          this.$refs.addSigningLian.init(this.shopId, this.shopBasicInfo.channelCode)
        })
      }
    },
    /**
     * 编辑签约信息弹窗
     * @param {Number} type 签约类型 0:类别 1:品牌 2:链平台
     */
    cateAddOrUpdateHandle (type) {
      if (type === 0) {
        this.cateAddOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.cateAddOrUpdate.init(this.shopId)
        })
      } else if (type === 1) {
        this.brandAddOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.brandAddOrUpdate.init(this.shopId)
        })
      } else if (type === 2) {
        this.lianAddOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.lianAddOrUpdate.init(this.shopId)
        })
      }
    },

    /**
     * 关闭弹窗
     */
    closePopup (val) {
      if (val === 'category') {
        this.addSigningCategoryVisible = false
        this.cateAddOrUpdateVisible = false
        this.getSignCategoryList()

        // 查询分类申请信息
        this.getSignCategoryList(0)
      } else if (val === 'brand') {
        this.addSigningBrandVisible = false
        this.brandAddOrUpdateVisible = false
        this.getSignBrandList()
        // 查询品牌申请信息
        this.getSignBrandList(0)
      } else if (val === 'lian') {
        this.addSigningLianVisible = false
        this.lianAddOrUpdateVisible = false
        this.getSignLianList()
        // 查询链平台申请信息
        this.getSignLianList(0)
      }
    },

    /**
     * 查询财务信息
     */
    queryShopFinancialInfo () {
      this.$http({
        url: this.$http.adornUrl('/platform/shopBankCard/listByShopId'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.shopId
        })
      }).then(({ data }) => {
        this.settlementAccounts = data
      })
    },

    // 获取签约有效期
    getContractTimeRange (date) {
      this.signingInfo.contractStartTime = date[0]
      this.signingInfo.contractEndTime = date[1]
    },

    // 更新基本信息
    updateShopBasicInfo () {
      this.$refs['shopBasicInfo'].validate((valid) => {
        if (!valid) {
          return
        }
        this.$http({
          url: this.$http.adornUrl('/platform/shopDetail'),
          method: 'PUT',
          data: this.$http.adornData(this.shopBasicInfo)
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('shopProcess.baseInfoUpdateSuccess'),
            type: 'success',
            duration: 1000
          })
          this.queryShopBasicInfo()
        })
      })
    },

    /**
     * 储存工商信息
     */
    updateCompanyInfo () {
      this.companyInfoForm.shopId = this.shopId
      this.$refs['companyInfoForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.$http({
          url: this.$http.adornUrl('/platform/shopCompany'),
          method: 'PUT',
          data: this.$http.adornData(this.companyInfoForm)
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('shopProcess.businessInfoUpdateSuccess'),
            type: 'success',
            duration: 1000
          })
          this.queryShopBusinessInfo()
        })
      })
    },

    /**
     * 更新签约信息
     */
    updateSigningInfo () {
      if (this.isSubmit) {
        return
      }
      this.isSubmit = true
      this.signingInfo.shopId = this.shopId
      this.$http({
        url: this.$http.adornUrl('/platform/shopDetail/updateSigningInfo'),
        method: 'PUT',
        data: this.$http.adornData(this.signingInfo)
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t('shopProcess.contractInfoUpdateSuccess'),
          type: 'success',
          duration: 1000
        })
        this.isSubmit = false
        // 更新签约信息成功后，需要更新店铺基本信息，因为店铺状态有可能发生改变
        this.queryShopBasicInfo()
      }).catch(({ e }) => {
        this.isSubmit = false
      })
    },

    /**
     * 初始化地图数据
     */
    setCenter () {
      this.center = null
      this.center = {
        lng: 113.327955,
        lat: 23.136783
      }
      this.zoom = 18
    },
    /**
     * 获取地图移动后回调的位置参数
     */
    syncCenterAndZoom (e) {
      this.setCenter()
      const { lng, lat } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
      this.shopBasicInfo.shopLng = lng
      this.shopBasicInfo.shopLat = lat
    },
    /**
     * 关闭地图说明标签
     */
    infoWindowClose () {
      this.show = false
    },
    /**
     * 打开地图说明标签
     */
    infoWindowOpen () {
      this.show = true
    },
    // 定位地图
    mapLocation (isTrue) {
      let area = ''
      const that = this
      if (isTrue === true) {
        // 选择省市区时，定位地图
        if (this.shopBasicInfo.provinceId) {
          area = this.shopBasicInfo.province
          this.zoom = 6
          if (this.shopBasicInfo.cityId) {
            area = area + this.shopBasicInfo.city
            this.zoom = 10
            if (this.shopBasicInfo.areaId) {
              area = area + this.shopBasicInfo.area
              this.zoom = 14
              if (this.shopBasicInfo.shopAddress !== null) {
                // 详细地址
                area = this.shopBasicInfo.province + this.shopBasicInfo.city + this.shopBasicInfo.area + this.shopBasicInfo.shopAddress
                this.zoom = 18
              }
            }
          }
        }
      } else {
        // this.center = null
        if (!this.shopBasicInfo.provinceId || !this.shopBasicInfo.cityId || !this.shopBasicInfo.areaId) {
          this.shopBasicInfo.shopAddress = null
          this.$message({
            message: this.$i18n.t('admin.selePCD'),
            type: 'error',
            duration: 1000
          })
          return
        }
        let point = new BMap.Point(this.center.lng, this.center.lat)
        let gc = new BMap.Geocoder()
        gc.getLocation(point, function (rs) {
          that.shopBasicInfo.shopAddress = rs.address.replace(that.shopBasicInfo.province + that.shopBasicInfo.city + that.shopBasicInfo.area, '')
        })
        // area = this.shopBasicInfo.province + this.shopBasicInfo.city + this.shopBasicInfo.area + this.shopBasicInfo.shopAddress
        this.zoom = 18
      }
      this.center = area || this.center
      this.isEditAddr = true
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  margin-bottom: 30px;
}

.app-container.shop-detail {
  font-size: 14px;
  color: #333;

  .head-title {
    margin-bottom: 15px;
  }

  .red-tag-txt {
    color: #ff4949;
  }

  // 导航栏
  .nav-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;

    .nav {
      position: relative;
      display: inline-block;
      display: flex;
      white-space: nowrap;

      .nav-item {
        margin: 0;
        font-size: 14px;
        line-height: 1em;
        padding: 15px 20px;
        color: #333;
        cursor: pointer;
      }

      .nav-item.active {
        color: #155BD4;
        // background: rgba(24,144,255, 0.06);
        border-radius: 4px 4px 0 0;
        border-bottom: 2px solid #155bd4;
      }
    }
  }

  .nav-box::before {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    border-bottom: 1px solid #f0f0f0;
    content: '';
  }

  .shop-info-box {

    // 公共
    p {
      margin: 0;
    }

    p.tit {
      display: inline-block;
      text-align: right;
    }

    .txt-bold {
      color: #333;
    }

    .asterisk {
      color: red;
      padding-right: 5px;
    }

    .table-box {
      display: block;
      width: 100%;
      margin: 20px 0;

      &>>>.el-table th,
      .el-table td {
        border-color: #f0f0f0;
      }

      &>>>.el-table__body-wrapper {
        max-height: 245px;
        overflow-y: scroll;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
      }

      &>>>.el-table__body-wrapper::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
      }

      &>>>.el-table__body {
        width: 100%;
      }
    }

    // 图片框大小统一
    &>>>.plugin-images {
      display: block;
      width: auto;
      height: 130px;

      img {
        vertical-align: top;
      }
    }

    &>>>.el-upload--picture-card,
    &>>>.el-upload-list--picture-card .el-upload-list__item {
      width: 130px;
      height: 130px;
      line-height: 130px;
      margin: 0;
    }

    &>>>.el-upload-list--picture-card {
      display: block;
      width: auto;
      height: 100%;
    }

    // 表单项下间距
    .ci-wrapper,
    .basic-info-box {
      .el-form-item {
        margin-bottom: 30px;
      }
    }

    .license-content {
      display: flex;
    }

    // 图片示例
    .upload-example {
      display: flex;
      min-width: 260px;
      margin-left: 150px;

      .example-box {
        margin-left: 0;

        &:nth-child(2) {
          margin-left: 30px;
        }
      }
    }

    // 示例框
    .example-box {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 130px;
      height: 130px;
      background: #FFFFFF;
      border: 1px solid #EAEAEA;
      border-radius: 3px;
      box-sizing: border-box;
      margin-left: 30px;

      img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 100%;
      }

      .tips {
        position: absolute;
        left: -1px;
        bottom: 0;
        width: 130px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #fff;
        background: rgba(51, 51, 51, 0.5);
        text-align: center;
        border-radius: 0px 0px 3px 3px;
      }
    }

    // 图片
    .tab-img {
      width: 60px;
      height: 60px;
      margin-right: 5px;
      cursor: pointer;
    }

    // 表格上的标题
    .table-data-title {
      display: flex;
      align-items: center;

      .text {
        font-size: 16px;
        min-width: 80px;

        .stress {
          color: #FF2120;
          padding-right: 5px;
        }
      }

      .tips {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }

      .edit-btn {
        margin-left: auto;
        cursor: pointer;
      }
    }

    // 基本信息模块
    .basic-info-mod {

      // 审核状态
      .audit-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: #f7f8fa;
        padding: 20px;
        line-height: 1em;
        margin-top: 20px;
        color: #333;

        p.tit {
          width: 95px;
        }

        .week {
          color: #666;
        }
      }

      .addr-select {
        display: block;
        width: 100%;
      }

      .bg-img {
        display: flex;
        justify-content: flex-start;

        .business-license-box {
          margin-right: 30px;

          .img-tips {
            display: block;
            text-align: center;
            font-size: 12px;
            color: #666;
            line-height: 1.5em;
            margin-top: 8px;

            p {
              margin: 0;
              padding: 0;
            }
          }
        }
      }

      .id-box {
        margin-bottom: 20px;

        .upload-content {
          .upload-img {
            display: flex;
            align-items: center;
            justify-content: flex-start;

            &>>>.el-form-item {
              margin-bottom: 10px;
            }

            div {
              &:nth-child(2) {
                margin-left: 30px;
              }
            }

            .disabled-upload {
              &>>>.el-upload {
                background: #f5f7fa;
              }
            }
          }

          .upload-img.en-upload-img {
            &>>>.el-form-item.is-error {
              margin-bottom: 45px;
            }
          }

          .upload-img.zh-upload-img {
            &>>>.el-form-item.is-error {
              margin-bottom: 22px;
            }
          }
        }

        .upload-tips {
          margin-left: 150px;
        }
      }

      // 信息
      .basic-info-list {
        margin-top: 30px;

        .basic-info-box {
          display: flex;
          align-items: top;
          justify-content: flex-start;
          width: 100%;

          .left-info {
            width: 40%;
            min-width: 300px;
            margin-right: 80px;
            text-align: left;
          }

          .right-info {
            width: 45%;
            min-width: 300px;
          }
        }

        .basic-info-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 20px 30px;
        }

        .upload-tips {
          font-size: 12px;
          color: #999;
          height: auto;
          line-height: 1.5em;
          margin-top: 5px;
        }
      }

      .foot-btn {
        margin-left: 120px;
      }
    }

    // 工商信息
    .business-info-mod {
      margin-top: 30px;

      .ci-wrapper {
        display: flex;
        justify-content: flex-start;
        width: 100%;

        .capital-int {
          &>>>.el-input__inner {
            padding-right: 0 !important;
            border-radius: 2px 0 0 2px !important;
          }
        }

        &>>>.el-date-editor.el-input,
        &>>>.el-date-editor.el-input__inner {
          width: 100%;
        }

        &>>>.el-date-editor .el-range-separator {
          width: auto !important;
        }

        .left-info {
          // width: 504px;
          width: auto;
          min-width: 500px;
          max-width: 40%;

          .btn-box {
            display: flex;
            margin-left: 134px;
            margin-bottom: 40px;

            .prev-btn {
              margin-right: 13px;
            }
          }
        }

        .right-info {
          width: 440px;
          width: 45%;
          min-width: 300px;
          max-width: 500px;
          margin-left: 30px;

          .business-license-box {
            .license-content {
              display: flex;
            }
          }

          .id-box {
            .upload-content {
              .upload-img {
                display: flex;

                div {
                  &:nth-child(2) {
                    margin-left: 20px;
                  }
                }
              }

              .upload-example {
                display: flex;
                // margin-top: 15px;
                margin-left: 150px;

                .example-box {
                  margin-left: 0;
                  padding: 5px;

                  &:nth-child(2) {
                    margin-left: 20px;
                  }
                }
              }

              .upload-tips {
                margin-left: 150px;
              }
            }
          }

          .img-static {
            display: block;
            width: 120px;
            height: 120px;
          }

          .img-static:not(:first-child) {
            margin-left: 20px;
          }

          // 示例框
          .example-box {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120px;
            height: 120px;
            background: #FFFFFF;
            border: 1px solid #EAEAEA;
            border-radius: 3px;
            box-sizing: border-box;
            margin-left: 20px;

            img {
              display: block;
              width: auto;
              max-width: 100%;
              height: auto;
              max-height: 100%;
            }

            .tips {
              position: absolute;
              left: -1px;
              bottom: 0;
              width: 120px;
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              color: #fff;
              background: rgba(51, 51, 51, 0.5);
              text-align: center;
              border-radius: 0px 0px 3px 3px;
            }
          }

          .upload-tips {
            font-size: 12px;
            color: #999;
            height: auto;
            line-height: 1.5em;
            margin-top: 10px;
          }

          // 图片上传框样式修改
          &>>>.el-upload {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 120px;
            height: 121px;
            background: #FFFFFF;
            border: 1px solid #EAEAEA;
            border-radius: 3px;
            box-sizing: border-box;

            // img {
            //   width: 120px;
            // }
            .el-icon-plus {
              font-size: 22px;
              color: #EAEAEA;
            }
          }
        }
      }

      .foot-btn {
        margin-left: 150px;
      }

      .en-foot-btn {
        margin-left: 200px;
      }
    }

    // 签约信息
    .contract-info {
      width: 100%;
      margin-top: 30px;
      margin-bottom: 80px;

      .s-item {
        .si-content {
          margin-top: 12px;

          .img-box {
            display: flex;
            align-items: center;

            // justify-content: center;
            img {
              // 图片自适应
              // width: auto;
              // height: auto;
              // max-width: 57px;
              // max-height: 57px;
              // 固定宽高
              width: 57px;
              height: 57px;
            }

            img:not(:last-child) {
              margin-right: 5px;
            }
          }

          .brand-logo {
            display: flex;
            align-items: flex-start;

            img {
              // 图片自适应
              // width: auto;
              // height: auto;
              // max-width: 57px;
              // max-height: 57px;
              // 固定宽高
              width: 57px;
              height: 57px;
            }

            img:not(:last-child) {
              margin: 5px;
            }
          }
        }

        .table-con {
          padding: 0;
        }
      }

      .s-brand-item {
        margin: 50px 0 40px;
      }
      .s-lian-item {
        margin: 50px 0 40px;
      }

      .s-sign-item {
        margin-bottom: 30px;
      }

      table {
        .table-item {
          .img-item {
            img {
              vertical-align: middle;
              width: 38px;
              height: 38px;
              background: #EBF1FF;
              border-radius: 19px;
              margin: auto;
            }
          }
        }
      }

      .btn-box {
        display: flex;
        justify-content: center;
        margin-bottom: 39px;

        .prev-btn {
          margin-right: 13px;
        }
      }

      &>>>.el-range-editor.el-input__inner {
        width: auto;
      }
    }

    // 财务信息
    .financial-info {
      margin: 30px 0;

      .table-data-title {
        margin-bottom: 20px;
      }

      .table-box {
        margin-top: 10px;

        &>>>.el-table__body-wrapper {
          height: auto;
          max-height: 100%;
        }
      }
    }

  }

  // 地图
  .map {
    width: 100%;
    height: 300px;
  }
}
</style>
<style lang="scss" scoped>
::v-deep .plugin-images .el-upload-list .el-upload-list__item {
  width: 120px;
  height: 120px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  margin-right: 0;
}

.end-time {
  position: relative;

  .text {
    position: absolute;
    left: 30px;
  }
}</style>
